<template>
  <el-row>
    <el-col :span="6">
      <h3>集成</h3>
      <span style="font-size: small">Web 钩子可以 绑定项目发生的事件。</span>
    </el-col>
    <el-col :span="12">
      <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="1">
        <el-form-item label="链接(URL)" prop="url">
          <el-input v-model="form.url" placeholder="http://example.com/trigger-ci.json" />
        </el-form-item>
        <el-form-item label="安全令牌" prop="token">
          <el-input v-model="form.token" placeholder="使用此令牌来验证接收信息的有效性。 它将通过 HTTP 头的 X-Gitlab-Token 发送。" />
        </el-form-item>
        <el-form-item label="触发器">
          <el-col>
            <el-checkbox v-model="form.hookPush">推送事件</el-checkbox>
          </el-col>
          <el-col>
            <el-checkbox v-model="form.hookTag">标签推送事件</el-checkbox>
            <span class="hook-desc">此链接将在推送新标签到版本仓库时触发</span>
          </el-col>
          <el-col>
            <el-checkbox v-model="form.hookMerge">合并请求事件</el-checkbox>
            <span class="hook-desc">合并请求创建、更新、合并时将触发此链接</span>
          </el-col>
          <el-col>
            <el-checkbox v-model="form.hookRepositoryUpdate">Repository Update</el-checkbox>
            <span class="hook-desc">仓库更新触发此链接</span>
          </el-col>
        </el-form-item>
        <el-form-item label="SSL 证书验证">
          <el-col>
            <el-checkbox v-model="form.ssl" label="开启 SSL 证书验证" />
          </el-col>
        </el-form-item>
      </el-form>
      <el-button type="success" @click="addHook">增加WebHook</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { postData } from '@/api/requestData'
export default {
  data() {
    return {
      form: {
        url: '',
        token: '',
        hookPush: true,
        hookTag: false,
        hookMerge: false,
        hookRepositoryUpdate: false,
        ssl: false
      },
      rules: {
        url: [{ required: true, message: '链接地址必填', trigger: 'blur' }],
        token: [{ required: true, message: '安全令牌必填', trigger: 'blur' }]
      }
    }
  },
  methods: {
    addHook() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          postData('/git/add/webhook', this.form).then((response) => {
            this.$message.success(response.message)
          }).catch(() => {})
        }
      })
    }
  }
}
</script>

<style scoped>
.hook-desc {
  display: block;
  margin-left:25px;
  height: 20px;
  line-height: 20px;
  font-size: x-small;
}
.push-link {
  margin-left: 25px;
}
</style>